
<% var html={ %>
<div class='row'>
    <div id="googleMap" ></div>
</div>
<% }; %>
<% var js={ %>
<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyCttnir7GHS6XxOoIT64aPT_BW9sIXC3q8&sensor=false&libraries=geometry"></script>
<script>
    var center = new google.maps.LatLng(39.9054905603894,116.39763216225809);
    var map;
    var myMarks=[];
    var myTrip=[];
    var myTripTime=[];
    var startTime;
    var endTime;
    $(function () {
        var height = $(window).height() - 20;
        var width = $(window).width();
        $("#googleMap").css("height", height + "px").css("width", width + "px");
        init();
    })
    function init(){
        if(myMarks.length>0){
            $(myMarks).each(function(i,o){
                o.setMap(null);
            });
        }
        $.post("/console/machine/monitoring/ponit/trace/json",{startTime:"${startTime!}",endTime:"${endTime!}",deviceId:"${deviceId}"},function(data){
            if(data.code==1){
                map=null;
                myTrip=[];
                myTripTime=[];
                var liatPoint = data.data==undefined?undefined:data.data;
                if(liatPoint!=undefined){
                    $(liatPoint).each(function(i,ponit){
                        if(i==0){
                            center=new google.maps.LatLng(ponit.lat,ponit.lng);
                            startTime=""+ ponit.data.time+"";
                        }else if(i== liatPoint.length-1){
                            endTime=""+ ponit.data.time+"";
                        }else{
                        }
                        myTrip.push(new google.maps.LatLng(ponit.lat,ponit.lng));
                        myTripTime.push(ponit.data.time);
                        myMarks.push(new google.maps.Marker({
                            position: new google.maps.LatLng(ponit.lat,ponit.lng),
                            icon:ponit.icon
                        }));
                    });
                }
                var mapProp = {
                    center:center,
                    zoom:18,
                    mapTypeId:google.maps.MapTypeId.HYBRID
                };
                if(map!=undefined){
                    var ma= new google.maps.Marker({
                        position:  center
                    });
                    map.panTo(ma.getPosition());
                }else{
                    map=new google.maps.Map(document.getElementById("googleMap")
                        ,mapProp);
                }


                var flightPath=new google.maps.Polyline({
                    path:myTrip,
                    strokeColor:"#99CC33",
                    strokeOpacity:1,
                    strokeWeight:4
                });
                try{
                    $(myMarks).each(function(i,o){
                        o.setMap(map);
                    });
                }catch (e){
                }
                flightPath.setMap(map);
            }else{
                alert("系统出错")
            }
        });
    }
</script>
<% }; %>

<% layout("/view/console/skins/skin_2/layout_nonav.html", {js:js,html:html}) {} %>